<template>
  <div class="message-content">
    <!-- 文本消息 -->
    <TextMessage
      v-if="message.messageType === MESSAGE_TYPES.TEXT"
      :message="message"
    />
    
    <!-- 引用消息 -->
    <QuoteMessageComponent
      v-else-if="message.messageType === MESSAGE_TYPES.QUOTE"
      :message="message"
      :default-avatar="defaultAvatar"
    />
    
    <!-- 图片消息 -->
    <ImageMessage
      v-else-if="message.messageType === MESSAGE_TYPES.IMAGE"
      :message="message"
      :default-image="defaultImage"
    />
    
    <!-- 语音消息 -->
    <VoiceMessage
      v-else-if="message.messageType === MESSAGE_TYPES.VOICE_MSG"
      :message="message"
      :playing-voice-id="playingVoiceId"
      @play-voice="handlePlayVoice"
    />
    
    <!-- 文件消息 -->
    <FileMessage
      v-else-if="message.messageType === MESSAGE_TYPES.FILE"
      :message="message"
      @download-file="handleDownloadFile"
    />
    
    <!-- 通话消息 -->
    <CallMessage
      v-else-if="message.messageType === MESSAGE_TYPES.VOICE_CALL || message.messageType === MESSAGE_TYPES.VIDEO_CALL"
      :message="message"
    />
    
    <!-- APP链接消息 -->
    <AppLinkMessage
      v-else-if="message.messageType === MESSAGE_TYPES.APP_LINK"
      :message="message"
      :default-app-icon="defaultAppIcon"
      @open-app-link="handleOpenAppLink"
    />
    
    <!-- 名片消息 -->
    <div v-else-if="message.messageType === MESSAGE_TYPES.POSTCARD" class="postcard">
      <Postcard :userInfoId="message.recommendId" />
    </div>
    
    <!-- 转账消息 -->
    <div v-else-if="message.messageType === MESSAGE_TYPES.TRANSFER" class="transfer">
      <Transfer :transferId="message.content" />
    </div>
  </div>
</template>

<script>
import sanitizeHtml from '@/utils/sanitize';
import { MESSAGE_TYPES } from '@/constants/messageTypes';
import Postcard from './Postcard.vue';
import Transfer from './TransferContent.vue';
import {
  TextMessage,
  ImageMessage,
  VoiceMessage,
  FileMessage,
  CallMessage,
  AppLinkMessage,
  QuoteMessageComponent
} from './MessageTypes';

export default {
  name: 'MessageContent',
  components: {
    Postcard,
    Transfer,
    TextMessage,
    ImageMessage,
    VoiceMessage,
    FileMessage,
    CallMessage,
    AppLinkMessage,
    QuoteMessageComponent
  },
  props: {
    message: {
      type: Object,
      required: true
    },
    playingVoiceId: {
      type: [String, Number],
      default: null
    },
    defaultAppIcon: {
      type: String,
      default: ''
    },
    defaultAvatar: {
      type: String,
      default: ''
    },
    defaultImage: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      MESSAGE_TYPES: {
        TEXT: 0,
        IMAGE: 1,
        FILE: 2,
        POSTCARD: 3,
        VOICE_CALL: 4,
        VIDEO_CALL: 5,
        VOICE_MSG: 6,
        TRANSFER: 7,
        APP_LINK: 10,
        QUOTE: 11
      }
    };
  },
  methods: {
    // 播放语音
    handlePlayVoice(voiceUrl, messageId) {
      this.$emit('play-voice', voiceUrl, messageId);
    },
    
    // 下载文件
    handleDownloadFile(fileUrl, fileName) {
      this.$emit('download-file', fileUrl, fileName);
    },
    
    // 打开应用链接
    handleOpenAppLink(appUrl) {
      this.$emit('open-app-link', appUrl);
    }
  }
};
</script>

<style scoped>
.message-content {
  width: 100%;
}

.postcard {
  padding: 0;
}

.transfer {
  padding: 0;
}
</style>